<template>
	<view class="user">
		<view class="top">
			<image src="/static/images/history.png" mode="aspectFit"></image>
			<view class="text">
				浏览历史
			</view>
		</view>
		<view class="content" v-if="historyRecords">
			<!-- 新闻核心内容展示区域 -->
			<view class="row" v-for="item in historyRecords">
				<news-box :item="item" @click.native="toDetail(item)"></news-box>
			</view>
		</view>
		<view class="no-history" v-else>
			<image src="/static/images/nohis.png" mode="widthFix"></image>
			<view class="text">
				暂无浏览记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			
		},
		onShow(){
			console.log('用户界面加载完毕')
			this.init()
		},
		data() {
			return {
				newsItemDetail: {
					id: 0,
					cid: 50,
					title: 'title',
					picUrl: '',
					lookTime: '2025-8-9'
				},
				historyRecords: []
			};
		},
		methods: {
			init() {
				this.getHistoryRecordFromStorage()
			},
			getHistoryRecordFromStorage() {
				this.historyRecords = uni.getStorageSync('historyRecords')
			},
			toDetail(newsItem) {
				uni.navigateTo({
					url: `/pages/detail/detail?categoryId=${newsItem.classid}&newsItemId=${newsItem.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.user {
		.top {
			padding: 50rpx 0;
			background-color: #f8f8f8;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;

			image {
				width: 180rpx;
				height: 180rpx;
				padding-bottom: 20rpx;
			}

			.text {
				font-size: 38rpx;
			}
		}

		.content {
			padding: 30rpx;

			.row {
				border-bottom: 1px dashed #efefef;
				padding: 15rpx 0rpx;
			}
		}

		.no-history {
			padding: 40rpx 0;
			text-align: center;
			font-size: 36rpx;
			image {
				width: 400rpx;
			}
			.text {
				font-size: 28rpx;
				color: #888;
			}
		}
	}
</style>